


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服中心</title>

    <link rel="stylesheet" href="plugins/chatstyle.css" />
    <script src="plugins/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="plugins/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-card class="box-card">
                <div style="overflow: hidden;"  class="position-box">
                    <el-row>
                        <el-col>
                            <div id="dataShow" ref="mbox" onmouseover="this.style.overflow='overlay'" onmouseout="this.style.overflow='hidden'" class="dataShow" >
                                <div v-for="(item,index) in mess" :key="index" style="background-color: #f5f5f5; padding:24px;">
                                    <br>
                                    <el-row v-if="item.sender==consumerinfo.consumerName">
                                        <el-col :span="20" :offset="3">
                                      <span class="aa">
                                        {{ item.content }}
                                      </span>
                                        </el-col>
                                        <el-col :span="1">
                                      <span>
                                          <el-avatar :size="size" :src="consumerinfo.head"></el-avatar>
                                      </span>
                                        </el-col>
                                    </el-row>
                                    <el-row v-else>
                                        <el-col :span="1">
                                      <span>
                                          <el-avatar :size="size" :src="userinfo.head"></el-avatar>
                                      </span>
                                        </el-col>
                                        <el-col :span="20">
                                      <span class="bb">
                                        {{ item.content }}
                                      </span>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-form ref="form" label-width="80px" label-position="top">
                    <el-form-item>
                        <el-col :span="21">
                            <el-input
                                    type="textarea"
                                    :rows="5"
                                    placeholder="请输入消息内容"
                                    v-model="content"
                                    @keyup.enter.native="sendMessage"
                            >
                            </el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="warning" style="width:88px;height: 116px;margin-left: 18px" @click="sendMessage">发 送</el-button>
                        </el-col>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            // 获取发送消息
            content:"",
            size:"medium",
            // 存放客服的信息
            consumerinfo:{
                "consumerName":"",
                "head":""
            },
            // 存放当前用户的信息
            userinfo:{
                "userName":"",
                "head":""
            },
            // 聊天信息列表
            mess:[
                {
                    "sender":"张三",
                    "content":"我要退货~",
                    "reciver":"张一"
                }
            ]
        },
        mounted(){
            this.loadUserInfo();
            this.loadConsumerInfo();
            this.loadMessage();
            this.refresh();
        },
        methods:{
            loadUserInfo(){
                axios.get("/consumer/getUserInfo")
                .then(res=>{
                    this.userinfo = res.data;
                })
            },
            loadConsumerInfo(){
                axios.get("/consumer/getConsumerInfo")
                    .then(res=>{
                        this.consumerinfo = res.data
                    })
            },
            sendMessage(){
                var param = {
                    "sender":this.consumerinfo.consumerName,
                    "content":this.content,
                    "reciver":this.userinfo.userName
                }
                if (this.content != ""){
                    axios.post("/consumer/sendMessage",param)
                        .then(res=>{
                            if (res.data=="yes"){
                                this.$message.success("发送成功")
                                this.loadMessage()
                                this.content=""
                                this.update()
                            } else if(res.data=="down"){
                                this.$message.error("聊天功能已关闭")
                            }else {
                                this.$message.error("发送失败")
                            }
                        })

                }else {
                    this.$message.error("不能为空")
                }
            },
            loadMessage(){
                axios.get("/consumer/getMessage")
                    .then(res=>{
                        this.mess = res.data
                    })
            },
            refresh(){
                setInterval(this.loadMessage,1000);
            }

        }
    });
</script>
</body>
</html>